/*
 * @Author: chenyuanming
 * @Date: 2022-04-02 10:13:37
 * @LastEditTime: 2022-04-07 11:11:02
 * @LastEditors: chenyuanming
 */
import React, { useState } from 'react';
import '../../views/contract/list.css'
import {

    PlusSquareOutlined, DeleteOutlined,

    QuestionCircleOutlined,

} from '@ant-design/icons';
import { Button, Input, Form, DatePicker, Select, Table, Modal } from 'antd';
const { TextArea } = Input;
const Contractmodify = (props) => {
    const { showAddContractModal, isAddContractModalVisible, customerData, title, title2, typeId } = props
    const openreceive = props.openreceive || null
    console.log(21, props);
    // const [addReceiveModal, setaddReceiveModal] = useState(false);
    // 控制增加合同分类的显示隐藏
    const [isAddContractCategoryModalVisible, setisAddContractCategoryModalVisible] = useState(false);
    // 单击表格行后当前选择的客户信息
    // const [customerData, setcustomerData] = useState({});
    //合同分类的表格数据
    const deleteCategoryClick = (record) => {
        console.log(record);
    }
    const categoryColumns = [
        {
            title: '类型',
            dataIndex: 'contractType',
            key: 'contractType',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            render: (text, record) => {
                return (
                    <div>
                        <DeleteOutlined className='renewIcon' onClick={() => {
                            deleteCategoryClick(record)
                        }} />
                    </div>
                )
            }
        }
    ];
    const categoryDatasource = [
        {
            key: 1,
            contractType: '租赁'
        }
    ]
    // modal框事件
    // const showAddContractModal = () => {
    //     setisAddContractModalVisible(true);
    // };
    const showAddContractCategory = () => {
        setisAddContractCategoryModalVisible(true)
    }
    const handleAddContractCategoryOk = () => {
        setisAddContractCategoryModalVisible(false)
    }
    const handleAddContractCategoryCancel = () => {
        setisAddContractCategoryModalVisible(false)
    }
    // 订单编号中选择订单
    const [isChooseOrder, setisChooseOrder] = useState(false);
    const handleChooseOrderCancel=()=>{
        setisChooseOrder(false)
    }
    const chooseOrder = () => {

    }
    return (
        <div>
            <div >
                <Modal cancelText="关闭" okText="保存" className='AddContractModal addContract' title={<span style={{ fontWeight: 'bold' }}>{title}</span>} visible={isAddContractModalVisible}
                    onOk={() => {
                        showAddContractModal(false)
                    }}
                    onCancel={() => showAddContractModal(false)}>
                    <div className='AddContractModalBox'>
                        <div style={{ fontWeight: 'bold', marginBottom: '10px', borderBottom: '1px solod #aba9a9' }}>{title2}</div>
                        <div>
                            <Form
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 14 }}
                                layout="horizontal"
                                autoComplete="off"
                            >
                                <Form.Item className='formBottom' label="客户名称">
                                    <Input className='shortInput' size='small' disabled value={customerData.customerName} />
                                </Form.Item>

                                <Form.Item className='formBottom' label="合同编号">
                                    <Input className='shortInput' size='small' disabled value='HT1125432133' />
                                    <span style={{ color: '#969696', marginLeft: '5px' }}><QuestionCircleOutlined className='wenhao' />  自动编号</span>
                                </Form.Item>
                                <Form.Item className='formBottom' label="合同分类">
                                    <Select size='small' className='shortInput'>
                                        <Select.Option value="demo1">Demo1</Select.Option>
                                        <Select.Option value="demo2">Demo2</Select.Option>
                                    </Select>
                                    <Button onClick={showAddContractCategory} size='small' style={{ marginLeft: '5px', borderRadius: '5px', color: '#fff', backgroundColor: '#5cad69' }}><PlusSquareOutlined />新增</Button>
                                </Form.Item>
                                <Form.Item className='formBottom' label="订单编号">
                                    <Input className='shortInput' size='small' value='HT1125432133' />
                                    <Button onClick={chooseOrder} size='small' style={{ marginLeft: '5px', borderRadius: '2px', color: 'black', backgroundColor: '#d7dee5' }}>...</Button>
                                </Form.Item>
                                <Form.Item className='formBottom' label="日期">
                                    <div style={{ display: 'flex' }}>
                                        <div>
                                            <DatePicker />
                                        </div>
                                        ~
                                        <div style={{ marginLeft: '5px' }}>
                                            <DatePicker />
                                        </div>
                                    </div>
                                </Form.Item>
                                <Form.Item className='formBottom' label="总金额">
                                    <Input style={{ width: '80px' }} size='small' value='22' />元
                                </Form.Item>
                                <Form.Item className='formBottom' label="已收款">
                                    {
                                        typeId === 0 ? <div><Input style={{ width: '80px' }} size='small' value='22' />元</div> : <div>
                                            <span>22元</span>
                                            <Button size='small' onClick={() => {
                                                openreceive()
                                            }} style={{ marginLeft: '15px', borderRadius: '5px', color: '#fff', backgroundColor: '#5cad69' }}>新增</Button>
                                        </div>
                                    }
                                </Form.Item>
                                <Form.Item className='formBottom' label="提供发票">
                                    <Select size='small' style={{ width: '80px' }}>
                                        <Select.Option value="demo1">是</Select.Option>
                                        <Select.Option value="demo2">否</Select.Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item className='formBottom' label="是否含税">
                                    <Select size='small' style={{ width: '80px' }}>
                                        <Select.Option value="demo1">是</Select.Option>
                                        <Select.Option value="demo2">否</Select.Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item className='formBottom' label="附件">
                                    <Button style={{ color: '#fff', borderRadius: '5px', backgroundColor: '#00b7ee' }}>选择文件</Button>
                                </Form.Item>
                                <Form.Item className='formBottom' label="备注">
                                    <TextArea rows={4} />
                                </Form.Item>
                                <Form.Item className='formBottom' label="业务员">
                                    <Button disabled style={{ color: '#fff', borderRadius: '5px', backgroundColor: '#0099cc' }}>超级管理员</Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </Modal>
            </div>
            {/* 新增合同分类modal框 */}
            <div>
                <Modal cancelText="关闭" okText="新增" className='AddContractModal' title={<span style={{ fontWeight: 'bold' }}>自定义选项值</span>} visible={isAddContractCategoryModalVisible} onOk={handleAddContractCategoryOk} onCancel={handleAddContractCategoryCancel}>
                    <div className='AddContractModalBox'>
                        <div style={{ fontWeight: 'bold', marginBottom: '10px', borderBottom: '1px solod #aba9a9' }}>自定义选项值</div>
                        <div>
                            <Form
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 14 }}
                                layout="horizontal"
                                autoComplete="off"
                            >
                                <Form.Item className='formBottom' label="新增选项值">
                                    <Input className='shortInput' size='small' />
                                </Form.Item>

                                <Form.Item className='formBottom' label="已有选项值">
                                    <div className='mytab'>
                                        <Table dataSource={categoryDatasource} columns={categoryColumns} pagination={false} />
                                    </div>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </Modal>
            </div>
            {/* 点击选择订单编号 */}
            <div>

            <Modal cancelText="关闭" className='AddContractModal' title={<span style={{ fontWeight: 'bold' }}>选择订单</span>} visible={isChooseOrder} onCancel={handleChooseOrderCancel}>
                    <div className='AddContractModalBox'>
                        <div style={{ fontWeight: 'bold', marginBottom: '10px', borderBottom: '1px solod #aba9a9' }}>订单列表</div>
                        <div>
                            <Form
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 14 }}
                                layout="horizontal"
                                autoComplete="off"
                            >
                                <Form.Item className='formBottom' label="新增选项值">
                                    <Input className='shortInput' size='small' />
                                </Form.Item>

                                <Form.Item className='formBottom' label="已有选项值">
                                    <div className='mytab'>
                                        <Table dataSource={categoryDatasource} columns={categoryColumns} pagination={false} />
                                    </div>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    );
}

export default Contractmodify;
